<template>
    <div class="container">
        <div class="row mt-5 header">
            <div class="col-12 d-flex align-items-center">
                <ul class="d-flex p-2" style="width: 100%;">
                    <li style="width: 50%;">商品</li>
                    <li style="width: 20%;">价格</li>
                    <li style="width: 20%;">数量</li>
                    <li style="width: 20%;">合计</li>
                    <li style="width: 10%;">操作</li>
                </ul>
            </div>
        </div>
        <div class="row mt-2 body">
            <div class="col-12 d-flex flex-column align-items-center">
                <ul v-for="item,index in 3" class="d-flex p-2 card flex-row align-items-center border-0" style="width: 100%;">
                    <li style="width: 50%;" class="description d-flex align-items-center gap-3">
                        <img class="img-fulid" src="../../assets/images/sp1.jpg" alt="">
                        <div class="d-flex flex-column gap-2">
                            <p>顺口味 无尘豆腐猫砂6L 快速除臭结团</p>
                            <span>分类：猫猫主粮</span>
                        </div>
                    </li>
                    <li style="width: 20%;" class="price">￥239.00</li>
                    <li style="width: 20%;" class="num">
                        {{ 7 }} 袋
                        <!-- <el-input-number v-model="quantity" :min="1" :max="100"
                        @change="handleQuantityChange" size="small"></el-input-number> -->
                    </li>
                    <li style="width: 20%;" class="total">￥239.00</li>
                    <li style="width: 10%;" class="operate">
                        <el-button type="danger" icon="el-icon-delete" circle></el-button>
                    </li>
                </ul>
            </div>
        </div>

        <div class="row mt-2 footer">
            <div class="col-12 d-flex justify-content-end align-items-center">
                <div style="width: 10%;" class="d-flex flex-column gap-2">
                    <div class="freight">运费 &nbsp;&nbsp;&nbsp;<span>￥50</span></div>
                    <div class="ordertotal">订单总计&nbsp;&nbsp;&nbsp;<span>￥836</span></div>
                    <div class="gocashier" @click="goCreateOrder">前往收银台</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'shoppingcart',
    data(){
        return{
            quantity:1,
        }
    },

    methods:{
        goCreateOrder(){
            this.$router.push({
                name: 'createOrder',
            });
        }
    }
}
</script>

<style scoped>
.header ul{
    border: 1px solid rgba(153, 153, 153,.5);
}
.body{
    border: 1px solid rgba(153, 153, 153,.4);
    border-radius: 4px;
}
.body .description img{
    width: 90px;
    height: 90px;
}
.body .description p{
    font-size: 14px;
    font-weight: normal;
    color: #000000;
    margin: 0;
}
.body .description span{
    font-size: 12px;
    font-weight: normal;
    color: #777777;
}
.body .price {
    font-size: 14px;
    font-weight: normal;
    color: #777777;
}
.body .num {
    font-size: 14px;
    font-weight: bold;
    color: #777777;
}
.body .total {
    font-size: 14px;
    font-weight: bold;
    color: #777777;
}

.footer .freight{
    font-size: 15px;
    font-weight: bold;
    color: #777777;
}
.footer .freight span{
    font-size: 14px;
    font-weight:400;
    color: #777777;
}
.footer .ordertotal{
    font-size: 15px;
    font-weight: bold;
    color: #777777;
}
.footer .ordertotal span{
    font-size: 14px;
    font-weight:400;
    color: #777777;
}
.footer .gocashier{
    width: 123px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    font-weight: normal;
    color: #ffffff;
    border-color: #ff9003;
    background-color: #ff9003;
    background-image: none;
    cursor: pointer;
}
.footer{
    padding: 10px;
    border: 1px solid rgba(153, 153, 153,.4);
    border-radius: 4px;
}
</style>